<template>
  <div class="pop-body-container">
    <div class="info-item-wrapper">
      <div class="info-label">标记类型：</div>
      <div class="info-value">{{ dataSoucre.markTypeDesc || "-" }}</div>
    </div>
    <div class="info-item-wrapper">
      <div class="info-label">标记名称：</div>
      <div class="info-value">{{ dataSoucre.markName || "-" }}</div>
    </div>
    <div class="info-item-wrapper">
      <div class="info-label">关联BIM：</div>
      <div class="info-value">{{ dataSoucre.componentId || "-" }}</div>
    </div>
    <div class="info-item-wrapper">
      <div class="info-label">标记描述：</div>
      <div class="info-value">{{ dataSoucre.markDesc || "-" }}</div>
    </div>
    <div class="info-item-wrapper">
      <div class="info-label">创建人：</div>
      <div class="info-value">{{ dataSoucre.creator || "-" }}</div>
    </div>
    <div class="info-item-wrapper">
      <div class="info-label">创建时间：</div>
      <div class="info-value">{{ dataSoucre.createTime || "-" }}</div>
    </div>
  </div>
</template>

<script>
import { detailMarkers } from "@/api/bim";
export default {
  props: {
    elemId: {
      type: String,
      default: "",
    },
  },
  watch: {
    elemId: {
      handler(val) {
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      dataSoucre: {},
    };
  },
  methods: {
    getDetail() {
      let uuid = this.elemId.slice(this.elemId.indexOf("_") + 1);
      return new Promise((resolve, reject) => {
        detailMarkers({ uuid })
          .then((res) => {
            this.dataSoucre = res;
            resolve();
          })
          .catch((_) => {
            this.dataSoucre = {};
            reject();
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.pop-body-container {
  background-color: #fff;
  padding: 0 8px;
  .info-item-wrapper {
    padding-bottom: 12px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    .info-label {
      color: #666;
      min-width: 64px;
      font-size: 12px;
      text-align: right;
    }
    .info-value {
      color: #444;
      font-size: 12px;
      flex: 1;
      word-break: break-word;
    }
  }
}
</style>
